<template>
  <div class="recommend w">
    <div class="recom-produce fl">
      <div class="recom-hd">
        <img src="../../assets/img/recom-produce.png" />
        <span>与品质生活不期而遇</span>
      </div>
      <div class="recom-bd">
        <ul v-if="rmsg.length == 0">
          <li :key="rproduce" v-for="rproduce in rproduces">
            <a @click="goToProduce(rproduce.produceId)">
              <div class="rImg">
                <img :src="rproduce.produceImgs"/>
              </div>
              <p v-text="rproduce.produceDesc"></p>
            </a>
          </li>
        </ul>
        <div class="msg" v-else v-text="rmsg"></div>
      </div>
    </div>
    <div class="recom-store fr">
      <div class="recom-hd">
        <img src="../../assets/img/recom-store.png" />
        <span>发现你的专属宝藏</span>
      </div>
      <div class="recom-bd">
        <ul v-if="smsg.length == 0">
          <li :key="rstore" v-for="rstore in rstores">
            <a @click="goToStore(rstore.storeId)">
              <div class="rImg">
                <img :src="rstore.storeIcon" />
              </div>
              <p style="font-size: 20px; font-weight: bold;" v-text="rstore.storeName"></p>
            </a>
          </li>
        </ul>
        <div class="msg" v-else v-text="smsg"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rmsg: '正在为您搜寻好书……',
      smsg: '正在为您搜寻好店……',
      rproduces: [],
      rstores: [],
    };
  },
  computed: {},
  watch: {},
  methods: {
    goToProduce(id) {
      window.open(process.env.PRODUCE_URL + id, '_blank');
    },
    goToStore(id) {
      window.open(process.env.STORE_URL + id, '_blank');
    },
  },
  mounted() {
    // var produceUrl = process.env.URL_HEAD + "/produce/produce/list";
    // var storeUrl = process.env.URL_HEAD + "/store/store/list";
    // var produceUrl = process.env.URL_HEAD + "/api/produce/produce/list";
    // var storeUrl = process.env.URL_HEAD + "/api/store/store/list";
    var produceUrl = process.env.URL_HEAD + "/produce/produce/list";
    
    var storeUrl = process.env.URL_HEAD + "/store/store/list";
    // var storeUrl = process.env.URL_HEAD + "/store/store/list";
    this.rmsg = '正在为您搜寻好书……';
    this.smsg = '正在为您搜寻好店……';
    this.$http
      .get(produceUrl, {
        params: {
          limit: 2147483647,
        }
      })
      .then(
        (response) => {
          console.log("connect " + produceUrl + " success");
          console.log(response.body.page.list);
          this.rproduces = [];
          var array = response.body.page.list;
          while(this.rproduces.length < 3) {
            this.rproduces.push(array[Math.floor((Math.random()*(array.length)))]);
            this.rproduces.push(array[Math.floor((Math.random()*(array.length)))]);
            this.rproduces.push(array[Math.floor((Math.random()*(array.length)))]);
            var r = this.rproduces;
            const res = new Map();
            this.rproduces = r.filter((r) => !res.has(r.produceId) && res.set(r.produceId, 1));
          }
          if(this.rproduces.length > 3) {
            this.rproduces = this.rproduces.slice(0, 3);
          }
          this.rmsg = '';
        },
        (response) => {
          console.log("recommend error: cannot connect " + produceUrl);
          this.rmsg = "请求失败！";
        }
      );
    this.$http
      .get(storeUrl, {
        params: {
          limit: 2147483647,
        }
      })
      .then(
        (response) => {
          console.log("connect " + storeUrl + " success");
          console.log(response.body.page.list);
          this.rstores = [];
          var array = response.body.page.list;
          while(this.rstores.length < 3) {
            this.rstores.push(array[Math.floor((Math.random()*(array.length)))]);
            this.rstores.push(array[Math.floor((Math.random()*(array.length)))]);
            this.rstores.push(array[Math.floor((Math.random()*(array.length)))]);
            var s = this.rstores;
            const res = new Map();
            this.rstores = s.filter((s) => !res.has(s.storeId) && res.set(s.storeId, 1));
          }
          if(this.rstores.length > 3) {
            this.rstores = this.rstores.slice(0, 3);
          }
          this.smsg = '';
        },
        (response) => {
          console.log("recommend error: cannot connect " + storeUrl);
          this.smsg = '请求失败！';
        }
      );
  },
};
</script>

<style scoped>
.recommend {
  height: 300px;
  margin-top: 10px;
}
.recom-produce {
  width: 49%;
  height: 100%;
}
.recom-store {
  width: 49%;
  height: 100%;
}
.recom-hd {
  width: 100%;
  height: 20%;
  line-height: 55px;
  color: #999999;
}
.recom-produce .recom-hd {
  border-bottom: 3px solid #2db2fe;
}
.recom-store .recom-hd {
  border-bottom: 3px solid #ffdd0a;
}
.recom-hd img {
  transform: scale(0.7);
}
.recom-bd {
  width: 100%;
  height: 80%;
}
.recom-bd li {
  overflow: hidden;
  float: left;
  width: 196px;
  text-align: center;
}
.recom-bd .rImg {
  width: 100%;
  height: 200px;
  text-align: center;
  vertical-align: middle;
}
.recom-bd img {
  width: 100%;
  height: 200px;
  transform: scale(0.8);
  transition: all 1s;
}
.recom-bd img:hover {
  opacity: 0.5;
}
.recom-bd p {
  margin-top: -8px;
  padding: 0 15px;
}
.recom-bd p:link {
  color: black;
}
.recom-bd .msg {
  width: 100%;
  height: 240px;
  font-size: 20px;
  font-weight: bold;
  line-height: 240px;
  text-align: center;
  color: #b1191a;
}
</style>